{% extends 'base.html' %}
{% load site_tags %}
{% load static %}

{% block title %}{{ site_settings.institute_name }}{% if site_settings.tagline %} — {{ site_settings.tagline }}{% endif %}{% endblock %}

{% block extra_css %}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="{% static 'css/home.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}
{# ── Hero: one composition — brand, headline, line, CTAs, atmosphere ── #}
<section class="home-hero" aria-label="Welcome">
  <div class="home-hero__glow" aria-hidden="true"></div>
  <div class="home-hero__grid" aria-hidden="true"></div>
  <div class="container home-hero__inner">
    <p class="home-hero__brand reveal" data-reveal>
      {% if site_settings.has_logo_light %}
      <img src="{{ site_settings.logo_light_url }}" alt="" class="home-hero__logo" height="36">
      {% endif %}
      <span>{{ site_settings.institute_name }}</span>
    </p>
    <h1 class="home-hero__title reveal" data-reveal>
      {% if site_settings.tagline %}
        {{ site_settings.tagline }}
      {% else %}
        Skills you can prove.<br>
        <em>Certificates employers can verify.</em>
      {% endif %}
    </h1>
    <p class="home-hero__lede reveal" data-reveal>
      Learn with guided courses, or take a proctored certification exam —
      then share a credential with a public verify link.
    </p>
    <div class="home-hero__cta reveal" data-reveal>
      {% if not user.is_authenticated %}
      <a href="{% url 'accounts:student_signup' %}" class="home-btn home-btn--accent">
        Get started free
      </a>
      <a href="#explore" class="home-btn home-btn--ghost">Explore paths</a>
      {% else %}
      <a href="{% url 'dashboard:redirect' %}" class="home-btn home-btn--accent">Go to dashboard</a>
      <a href="#explore" class="home-btn home-btn--ghost">Explore paths</a>
      {% endif %}
    </div>
  </div>
  <a href="#explore" class="home-hero__scroll reveal" data-reveal aria-label="Scroll to explore">
    <span></span>
  </a>
</section>

{# ── Path chooser: one job ── #}
<section id="explore" class="home-paths">
  <div class="container">
    <header class="home-section-head reveal" data-reveal>
      <p class="home-eyebrow">Two ways in</p>
      <h2>Choose how you want to grow</h2>
    </header>
    <div class="home-paths__grid">
      <a href="#courses" class="home-path reveal" data-reveal>
        <span class="home-path__icon" aria-hidden="true"><i class="bi bi-journal-richtext"></i></span>
        <h3>Learning path</h3>
        <p>Modules, projects, and progress — build the skill, then sit the exam.</p>
        <span class="home-path__go">Browse courses <i class="bi bi-arrow-right"></i></span>
      </a>
      <a href="#certifications" class="home-path home-path--cert reveal" data-reveal>
        <span class="home-path__icon" aria-hidden="true"><i class="bi bi-award"></i></span>
        <h3>Direct certification</h3>
        <p>Already skilled? Take a secure MCQ exam and earn a verifiable badge.</p>
        <span class="home-path__go">See certifications <i class="bi bi-arrow-right"></i></span>
      </a>
    </div>
  </div>
</section>

{# ── Quiet trust line (not hero clutter) ── #}
<div class="home-trust reveal" data-reveal>
  <div class="container home-trust__row">
    <span><strong>{{ courses|length }}+</strong> courses</span>
    <span class="home-trust__dot" aria-hidden="true"></span>
    <span><strong>{{ certifications|length }}+</strong> cert tracks</span>
    <span class="home-trust__dot" aria-hidden="true"></span>
    <span>Public verify portal</span>
    <span class="home-trust__dot" aria-hidden="true"></span>
    <span>Proctored &amp; practical options</span>
  </div>
</div>

{# ── Courses ── #}
<section id="courses" class="home-catalog">
  <div class="container">
    <header class="home-section-head home-section-head--row reveal" data-reveal>
      <div>
        <p class="home-eyebrow">Courses</p>
        <h2>Start learning</h2>
        <p class="home-section-head__sub">{{ courses|length }} published track{{ courses|length|pluralize }}</p>
      </div>
      <a href="{% url 'courses:course_list' %}" class="home-link-all">View all <i class="bi bi-arrow-right"></i></a>
    </header>

    {% if featured_courses %}
    <div class="home-featured reveal" data-reveal>
      <p class="home-eyebrow mb-3">Featured</p>
      <div class="home-featured__row">
        {% for course in featured_courses %}
        <a href="{% url 'courses:course_detail' slug=course.slug %}" class="home-featured__item">
          <strong>{{ course.title }}</strong>
          <span>
            {% if course.has_sale_price %}
              {{ course.currency }} {{ course.display_exam_price }}
            {% else %}
              Exam {{ course.currency }} {{ course.display_exam_price }}
            {% endif %}
            · Free skill check
          </span>
        </a>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    <div class="row g-4">
      {% for course in courses %}
      <div class="col-sm-6 col-xl-4 reveal" data-reveal>
        <article class="home-card">
          <a href="{% url 'courses:course_detail' slug=course.slug %}" class="home-card__media">
            {% if course.thumbnail %}
            <img src="{{ course.thumbnail.url }}" alt="" loading="lazy">
            {% else %}
            <div class="home-card__placeholder" aria-hidden="true">
              <i class="bi bi-mortarboard"></i>
            </div>
            {% endif %}
          </a>
          <div class="home-card__body">
            {% if course.category %}
            <span class="home-card__cat">{{ course.category.name }}</span>
            {% endif %}
            <h3 class="home-card__title">
              <a href="{% url 'courses:course_detail' slug=course.slug %}">{{ course.title }}</a>
            </h3>
            <p class="home-card__desc">{{ course.short_description|truncatechars:100 }}</p>
            <div class="home-card__meta">
              <span>{{ course.duration_minutes }} min exam</span>
              {% if course.duration_weeks %}<span>~{{ course.duration_weeks }} wks</span>{% endif %}
              <span>{{ course.get_module_count }} modules</span>
            </div>
            <a href="{% url 'courses:course_detail' slug=course.slug %}" class="home-card__btn">
              View course
            </a>
          </div>
        </article>
      </div>
      {% empty %}
      <div class="col-12">
        <p class="text-center text-muted py-5">No courses published yet.</p>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

{# ── Certifications ── #}
<section id="certifications" class="home-catalog home-catalog--certs">
  <div class="container">
    <header class="home-section-head home-section-head--row reveal" data-reveal>
      <div>
        <p class="home-eyebrow">Certifications</p>
        <h2>Prove what you know</h2>
        <p class="home-section-head__sub">Proctored exams · public verification</p>
      </div>
      <div class="d-flex gap-3 align-items-center">
        <a href="{% url 'certifications:verify' %}" class="home-link-all home-link-all--muted">Verify a certificate</a>
        <a href="{% url 'certifications:program_list' %}" class="home-link-all">View all <i class="bi bi-arrow-right"></i></a>
      </div>
    </header>

    <div class="row g-4">
      {% for program in certifications %}
      <div class="col-sm-6 col-xl-4 reveal" data-reveal>
        <article class="home-card home-card--cert">
          <a href="{% url 'certifications:program_detail' program.slug %}" class="home-card__media home-card__media--cert">
            {% if program.thumbnail %}
            <img src="{{ program.thumbnail.url }}" alt="" loading="lazy">
            {% else %}
            <div class="home-card__placeholder home-card__placeholder--cert" aria-hidden="true">
              <i class="bi bi-award"></i>
            </div>
            {% endif %}
            <span class="home-card__ribbon">Certification</span>
          </a>
          <div class="home-card__body">
            {% if program.category %}
            <span class="home-card__cat home-card__cat--cert">{{ program.category.name }}</span>
            {% endif %}
            <h3 class="home-card__title">
              <a href="{% url 'certifications:program_detail' program.slug %}">{{ program.title }}</a>
            </h3>
            <p class="home-card__desc">{{ program.short_description|truncatechars:100 }}</p>
            <div class="home-card__meta">
              <span>{{ program.questions_per_exam }} MCQs</span>
              <span>Pass {{ program.passing_score }}%</span>
            </div>
            {% if user.is_authenticated and user.is_student %}
            <a href="{% url 'certifications:apply' program.slug %}" class="home-card__btn home-card__btn--cert">Apply now</a>
            {% else %}
            <a href="{% url 'certifications:program_detail' program.slug %}" class="home-card__btn home-card__btn--cert">View certification</a>
            {% endif %}
          </div>
        </article>
      </div>
      {% empty %}
      <div class="col-12">
        <p class="text-center text-muted py-5">No certifications published yet.</p>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
(function () {
  var nodes = document.querySelectorAll('[data-reveal]');
  if (!nodes.length) return;
  if (!('IntersectionObserver' in window)) {
    nodes.forEach(function (el) { el.classList.add('is-visible'); });
    return;
  }
  var io = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        io.unobserve(entry.target);
      }
    });
  }, { rootMargin: '0px 0px -8% 0px', threshold: 0.12 });
  nodes.forEach(function (el, i) {
    el.style.setProperty('--reveal-delay', (i % 6) * 60 + 'ms');
    io.observe(el);
  });
})();
</script>
{% endblock %}